<template>
  <!-- 最近发表的文章 -->
  <div class="content">
    <div class="articles">
      <h3>{{ userData?.nickname }} 最近收藏的文章</h3>
      <div class="placeholder" v-if="articles.length === 0">暂无文章</div>
      <ul v-else>
        <!-- 文章列表 -->
        <li class="article-item" v-for="item in articles" :key="item.id">
          <a class="title" :href="'/article/' + item.article.id">{{ item.article.title }}</a>
          <p class="meta">
            发布日期: <span class="date">{{ item.article.publish_date }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="answers">
      <h3>{{ userData?.nickname }} 最近的回答</h3>
      <!-- 回答列表 -->
      <div class="answer-item" v-for="item in comments" :key="item.id">
        <span v-if="item.parent === null">
          {{ formatTime(item.created_date) }}在<a :href="'/article/' + item.article.id">{{ item.article.title }}</a>中评论说:
        </span>
        <span v-else>
          {{ formatTime(item.created_date) }}对<a :href="'/article/' + item.article.id" v-html="item.parent_content"></a>进行回答:
        </span>
        <pre v-html="item.content"></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
// 声明 props
defineProps({
  userData: {
    type: Object,
    required: true,
  }
});
const comments = ref([]);
const articles = ref([]);

// 获取评论数据
const getComments = async () => {
  const response = await axios.get("/api/accounts/auth/get_comments/",{ requiresAuth: true });
  comments.value = response.data;
};
// 获取文章数据
const fetchData = async () => {
  const response = await axios.get("/api/accounts/auth/get_collection/",{ requiresAuth: true });
  articles.value = response.data;
};
// 格式化时间
const formatTime = (timeStr) => {
  const date = new Date(timeStr);
  const now = new Date();
  const diff = now - date; // 时间差（毫秒）

  const minutes = Math.floor(diff / 60000);
  if (minutes < 60) {
    return `${minutes}分钟前`;
  }

  const hours = Math.floor(minutes / 60);
  const remainingMinutes = minutes % 60;
  if (hours < 24) {
    return `${hours}小时${remainingMinutes}分钟前`;
  }

  const days = Math.floor(hours / 24);
  if (days < 30) {
    return `${days}天前`;
  }

  const months = Math.floor(days / 30);
  if (months < 12) {
    return `${months}个月前`;
  }

  const years = Math.floor(months / 12);
  return `${years}年前`;
};
onMounted(() => {
  fetchData();
  getComments();
});
</script>

<style scoped>
/* 文章与回答部分的整体布局 */
.content {
  display: flex;
  gap: 20px;
}

/* 每部分的卡片样式 */
.articles,
.answers {
  flex: 1;
  background-color: var(--profile-bg-color, #fff);
  border-radius: 8px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 标题样式 */
h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  color:var(--profile-title-color, #333);
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}

/* 占位样式 */
.placeholder {
  color: var(--profile-placeholder-color, #999);
  text-align: center;
  font-size: 16px;
  padding: 10px;
}

/* 文章列表样式 */
.article-item {
  border-bottom: 1px solid #f2f2f2;
  padding: 10px 0;
}

.article-item:last-child {
  border-bottom: none;
}

.article-item .title {
  font-size: 14px;
  font-weight: bold;
  color: var(--profile-link-color, #007acc);
  text-decoration: none;
  transition: color 0.3s;
}

.article-item .title:hover {
  color: var(--profile-link-hover-color, #005ea8);
}

.article-item .meta {
  font-size: 14px;
  color: var(--profile-meta-color, #999);
}

/* 回答部分 */
.answer-item {
  margin-bottom: 10px;
}
.answer-item span{
  font-size: 14px;
  display: flex;
}
.answer-item span a {
  color: #ea6f5a;
  text-decoration: none;
  font-weight: bold;
  margin: 0 3px;
}
.answer-item span a:hover {
  color: #c73d2d;
}

.answer-item pre {
  background-color: #f7f7f7;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
  border: 1px solid #ebebeb;
}
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
}
</style>
